<template>
  <div class="member">
    <a-card :bordered="false">
      <!-- 表格顶部搜索部分 -->
      <c-table-search-form
        v-model="tableSearchForm"
        :datas="tableSearchFormData"
        @onAdd="handleAdd"
        @onSearch="handleSearch"
      >
      </c-table-search-form>

      <!-- 表格部分 -->
      <c-table
        :columns="tableColumns"
        :datas="tableData"
        :loading="loading"
        showPagination
        @onAdd="handleAdd('', 'add')"
        :paginationDatas="paginationDatas"
        @onPageSizeChange="onPageSizeChange"
        @onShowNumChange="onShowNumChange"
      >
        <!-- 表格自定义部分 -->
        <template slot="companyDirection" slot-scope="companyDirection">
          <a-tag
            :color="
              companyDirection.tableRow === '1'
                ? ''
                : companyDirection.tableRow === '2'
                ? ''
                : ''
            "
            >{{
              companyDirection.tableRow === "1"
                ? "买家"
                : companyDirection.tableRow === "2"
                ? "卖家"
                : "买卖家"
            }}</a-tag
          >
        </template>
        <template slot="auditState" slot-scope="auditState">
          <a-tag
            :color="
              auditState.tableRow === '0'
                ? 'blue'
                : auditState.tableRow === '1'
                ? 'green'
                : 'red'
            "
            >{{
              auditState.tableRow === "0"
                ? "待审核"
                : auditState.tableRow === "1"
                ? "已通过"
                : "已拒绝"
            }}</a-tag
          >
        </template>

        <!-- 表格操作按钮 -->
        <template slot="handle" slot-scope="row">
          <a-popconfirm
            ok-text="确定"
            cancel-text="取消"
            @confirm="
              handleFreezeStatus(row.tableRow.id, row.tableRow.resourceState)
            "
            v-if="row.tableRow.id >= 10"
          >
            <p slot="title">
              否确认将成员
              <a class="colorMain">{{ 645645645 }}</a>
              ？ {{ row.tableRow.resourceState === "0" ? "解冻" : "冻结" }}，
              {{ row.tableRow.resourceState === "0" ? "解冻" : "冻结" }}
              后，该成员将{{
                row.tableRow.resourceState === "0" ? "解冻" : "冻结"
              }}
              后，该成员将
              {{ row.tableRow.resourceState === "0" ? "正常" : "无法" }}
              登录后台
            </p>
            <a type="link">
              <Icon :type="row.tableRow.resourceState === '0' ?'zk-back-thaw':'zk-back-freeze' "  :iconStyle="iconStyle"/>
               {{
              row.tableRow.resourceState === "0" ? "解冻" : "冻结"
            }}</a>
            <a-divider type="vertical" />
          </a-popconfirm>
         
          <a @click="handleEdit(row.tableRow)"><a-icon type="edit" /> 编辑</a>

          <a-popconfirm
            ok-text="确定"
            cancel-text="取消"
            @confirm="handleDel([row.tableRow.id])"
            v-if="row.tableRow.id >= 10"
          >
            <a-divider type="vertical" />
            <p slot="title">
              是否确认删除
              <span class="colorMain">342342</span>
              ？删除后，该成员账号将注销，不可登录，不可恢复。
            </p>
            <a type="link"><a-icon type="delete" /> 删除</a>
          </a-popconfirm>

          <a-divider type="vertical" />
          <a @click="handleChangePassword(row.tableRow)"> <Icon :type="'zk-back-reset'" :iconStyle="iconStyle" />修改密码</a>
        </template>
      </c-table>

      <!-- 新增/编辑弹窗 -->
      <a-modal
        width="30%"
        :title="handleType == 'add' ? '新增成员' : '编辑成员'"
        :visible="visible"
        :confirm-loading="confirmLoading"
        @ok="handleOk"
        @cancel="handleCancel"
        :destroyOnClose="true"
        center
      >
        <c-form-model
          checkStrictly
          :datas="
            handleType == 'add'
              ? formAddData
              : handleType == 'edit'
              ? formEditData
              : formChangePasswordData
          "
          v-model="form"
          ref="formModels"
        ></c-form-model>
        <div class="drawer-footer-btn flex-center">
          <a-button class="margin-r10" @click="handleCancel">取消</a-button>
          <a-button type="primary" :loading="confirmLoading" @click="handleOk"
            >确定</a-button
          >
        </div>
      </a-modal>
    </a-card>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { getUserList } from "@/api/company/users";

export default {
  name: "Member",
  components: {},
  data() {
    return {
      iconStyle:{
         fontSize: '14px',
         color: "#758cff"
      },
      tableSearchForm: {
        department: "1",
        occupation: "1",
        searchKey: ""
      },
      tableSearchFormData: [
        {
          label: "部门",
          prop: "department",
          type: "select",
          typeData: [
            {
              label: "部门1",
              value: "0"
            },
            {
              label: "部门2",
              value: "1"
            },
            {
              label: "部门3",
              value: "2"
            }
          ]
        },
        {
          label: "职业",
          prop: "occupation",
          type: "select",
          typeData: [
            {
              label: "职业1",
              value: "0"
            },
            {
              label: "职业2",
              value: "1"
            },
            {
              label: "职业3",
              value: "2"
            }
          ]
        },
        {
          label:"请输入成员姓名/手机号码",
          prop: "searchKey",
          type: "search"
        },
        {
          prop: "addBtn",
          type: "addBtn"
        },
      ],
      tableColumns: [
        {
          title: "编号",
          dataIndex: "resourceName",
          key: "resourceName",
          align: "center",
          className: "text-left"
        },
        {
          title: "部门",
          dataIndex: "flag",
          key: "flag",
          align: "center"
        },
        {
          title: "职位",
          dataIndex: "moduleUrl",
          key: "moduleUrl",
          align: "center"
        },
        {
          title: "姓名",
          dataIndex: "url",
          key: "url",
          align: "center"
        },
        {
          title: "账号",
          dataIndex: "type",
          key: "type",
          scopedSlots: { customRender: "type" },
          align: "center"
        },
        {
          title: "手机号码",
          dataIndex: "resourceState",
          key: "resourceState",
          scopedSlots: { customRender: "resourceState" },
          align: "center"
        },
        {
          title: "创建时间",
          dataIndex: "",
          key: "",
          align: "center"
        },
        {
          title: "上次登录时间",
          dataIndex: "",
          key: "",
          align: "center"
        },
        {
          title: "状态",
          dataIndex: "createDate",
          key: "createDate",
          align: "center"
        },
        {
          title: "操作",
          key: "handle",
          scopedSlots: { customRender: "handle" },
          width: 280,
          align: "center"
        }
      ],
      formAddData: [
        {
          label: "姓名",
          prop: "name"
        },
        {
          label: "手机号码",
          prop: "phone"
        },
        {
          label: "登录账号",
          prop: "account"
        },
        {
          label: "登录密码",
          prop: "password"
        },
        {
          label: "确认密码",
          prop: "confirmPassword "
        },
        {
          label: "所属部门",
          prop: "member",
          type: "select",
          typeData: [
            {
              label: "部门1",
              value: "1"
            },
            {
              label: "部门2",
              value: "2"
            },
            {
              label: "部门3",
              value: "3"
            }
          ]
        },
        {
          label: "所属职位",
          prop: "position",
          type: "select",
          typeData: [
            {
              label: "职位1",
              value: "1"
            },
            {
              label: "职位2",
              value: "2"
            },
            {
              label: "职位3",
              value: "3"
            }
          ]
        }
      ],
      formEditData: [
        {
          label: "姓名",
          prop: "name"
        },
        {
          label: "手机号码",
          prop: "phone"
        },
        {
          label: "登录账号",
          prop: "account"
        },
        {
          label: "所属部门",
          prop: "member",
          type: "select",
          typeData: [
            {
              label: "部门1",
              value: "1"
            },
            {
              label: "部门2",
              value: "2"
            },
            {
              label: "部门3",
              value: "3"
            }
          ]
        },
        {
          label: "所属职位",
          prop: "position",
          type: "select",
          typeData: [
            {
              label: "职位1",
              value: "1"
            },
            {
              label: "职位2",
              value: "2"
            },
            {
              label: "职位3",
              value: "3"
            }
          ]
        }
      ],
      formChangePasswordData: [
        {
          label: "姓名",
          prop: "name"
        },
        {
          label: "登录账号",
          prop: "account"
        },
        {
          label: "旧密码",
          prop: "oldPassword"
        },
        {
          label: "新密码",
          prop: "newPassword"
        },
        {
          label: "确认密码",
          prop: "confirmPassword"
        }
      ],
      visible: false,
      confirmLoading: false,
      member: "",
      position: "",
      handleType: "add",
      form: {
        member: "1",
        position: "1"
      },
      menmberStatusArr: [
        {
          value: "",
          lable: "部门1"
        },
        {
          value: "0",
          lable: "部门2"
        },
        {
          value: "1",
          lable: "部门3"
        },
        {
          value: "2",
          lable: "部门2"
        }
      ],
      positionStatusArr: [
        {
          value: "",
          lable: "职位1"
        },
        {
          value: "0",
          lable: "职位2"
        },
        {
          value: "1",
          lable: "职位3"
        },
        {
          value: "2",
          lable: "职位2"
        }
      ],
      tableData: [],
      paginationDatas: {
        pageSizeOptions: ["10", "20", "30", "40", "50","200","1000"],
        pageSize: 10,
        pageNum: 1,
        total: 0
      }
    };
  },
  computed: {
    ...mapState({})
  },
  created() {
    this.onPageOnlod();
  },
  mounted() {},
  methods: {
    handleSearch(){ 
    },
    onPageOnlod() {
      this.loading = true;
      getUserList({
        auditState: this.member ? Number(this.member) : "",
        pageData: {
          ...{
            pageSize: this.paginationDatas.pageSize,
            pageNum: this.paginationDatas.pageNum
          }
        }
      })
        .then(res => {
          this.tableData = res.data.pageData;
          this.paginationDatas.total = res.data.total;
          this.loading = false;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    onShowNumChange(val) {
      this.paginationDatas.pageNum = val;
      this.onPageOnlod();
    },
    onPageSizeChange(val) {
      this.paginationDatas.pageSize = val;
      this.onPageOnlod();
    },
    handleEdit(row) {
      this.visible = true;
      this.handleType = "edit";
    },
    handleFreeze(row) {},
    handleChangePassword(row) {
      this.visible = true;
      this.handleType = "changePassword";
    },
    handleMemberChange(val) {
      this.member = val;
      this.onPageOnlod();
    },
    handleFreezeStatus() {},
    handleCancel() {
      this.visible = false;
    },
    handleOk() {},
    handleAdd() {
      this.form = {
        member: "1",
        position: "1"
      };
      this.handleType = "add";
      this.visible = true;
    }
  }
};
</script>

<style lang="less" scoped>
</style>
